<template>
  <!-- 专辑内歌曲列表项-->
    <div class="song" :class="{active: isHover && !isStay,chooseActive:isStay}"
         @mouseenter="isHover = true"
         @mouseleave="isHover = false">
        <div class="song-index">
            <span v-show="!isHover && !isStay">{{ musicDetail.index }}</span>
            <span v-show="isStay"><font-awesome-icon :icon="['fas', 'volume-up']"/></span>
            <span v-show="isHover && !isStay"><font-awesome-icon :icon="['fas', 'play']"/></span>
        </div>
        <div class="song-info">
            <div>{{ musicDetail.musicName }}</div>
        </div>
        <div class="song-artist">
            <router-link
                    v-for="(item,index) in artistList"
                    :to="{
                            name:'singer-detail',
                            params:{
                                id:item.id
                            }
                        }"
                    :key="index">
                {{ item.name }}{{ index === musicDetail.singers.length - 1 ? '' : ',' }}
            </router-link>
        </div>
        <div class="song-time">
            {{ formatMusicTime(Number.parseInt(musicDetail.time), 'ms') }}
        </div>
    </div>
</template>

<script>
import {formatMusicTime} from "@/http/tools";
import {SHOWITEMBG} from "@/http/constant";

export default {
    name: "AlbumSongItem",
    methods: {formatMusicTime},
    props: ['musicDetail'],
    data() {
        return {
            // musicDetail: {
            //     index: 1,
            //     id: 2038428370,
            //     musicName: "Love Me More",
            //     // 专辑主要歌手
            //     mainSinger: {
            //         id: 740216,
            //         name: "Sam Smith"
            //     },
            //     singers: [
            //         {
            //             "id": 740216,
            //             "name": "Sam Smith",
            //             "tns": [
            //                 "山姆·史密斯"
            //             ]
            //         },
            //         {
            //             "id": 63935,
            //             "name": "Kim Petras",
            //             "tns": [
            //                 "金.彼特拉斯"
            //             ]
            //         }
            //     ],
            //     time: '203134',
            //     alia: ['别名1', '别名2']
            // 是否显示主要的歌手
            // isShowMainArtist: true
            // },
            isHover: false,
            isStay: false,
        }
    },
    mounted() {
        // 当双击的时候固定显示其背景颜色
        this.$bus.$on(SHOWITEMBG, d => {
            this.isStay = String(d.id) === String(this.musicDetail.id);
        })
    },
    computed: {
        // 筛选歌手
        artistList() {
            const {singers, mainSinger, isShowMainArtist} = this.musicDetail
            if (isShowMainArtist) {
                return singers
            } else {
                return singers.filter(item => {
                    return item.id !== mainSinger.id
                })
            }
        },
        // 歌曲别名
        aliaName() {
            const {alia} = this.musicDetail
            if (alia.length) {
                return ` (${alia.join(',')})`
            } else {
                return ''
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.song {
  display: flex;
  height: 4vw;
  width: 100%;
  align-items: center;
  font-size: .9vw;
  border-radius: .7vw;
  //专辑编号
  .song-index {
    width: 3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    span:nth-child(3) {
      color: @mainColor;
    }
  }

  //歌曲名字
  .song-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 25%;

    div:nth-child(1) {
      font-weight: bolder;
      font-size: 1vw;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;
    }
  }

  //歌手部分
  .song-artist {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20%;
    height: 100%;
    width: 20%;

    a {
      color: @metaphorFont;
      font-size: .8vw;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;
    }

    a:hover {
      text-decoration: underline;
    }
  }

  //音乐时间
  .song-time {
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 22%;
  }
}

.active {
  background-color: @mouseHover;
  cursor: pointer;
}

.chooseActive {
  background-color: @bgColor;
  color: @mainColor;
}
</style>